<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui" template="/templates/layout.xhtml">

	<style type="text/css">
.slot {
	background: #FF9900;
	width: 300px;
	height: 300px;
	display: block;
}
</style>
	<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedObject = ui.draggable; 
        droppedObject.fadeOut('fast');
    }
</script>

	<ui:define name="ptitle">流程管理</ui:define>
	<ui:define name="pcontent">
		<h:form id="frm">
			<h:panelGrid columns="2"
				style="margin-bottom:5px;width:800px;height:100%;">
				<p:panel id="flowSelect" header="ICON"
					style="margin-bottom:5px;width:100px;height:300px;">
					<p:dataList id="iconselect" value="#{wfmDesignerBean.icons}"
						var="sicon" type="definition">
						<f:facet name="description">
							<p:graphicImage name="images/sys/#{sicon.iconfile}" >
							<p:draggable revert="true" />
							</p:graphicImage>
						</f:facet>
					</p:dataList>

				</p:panel>
				<p:panel id="flowDisplay" header="DESIGN"
					style="margin-bottom:5px;width:700px;height:300px;" styleClass="slot">
				
				<p:droppable for="flowDisplay" tolerance="touch"
					activeStyleClass="ui-state-highlight" 
					datasource="iconselect" >
        			<p:ajax listener="#{wfmDesignerBean.onDrop}" update="flowSelect flowDisplay" />
				</p:droppable>
				
				<p:dataList id="diconselect" value="#{wfmDesignerBean.droppedIconSelections}"
						var="dicon" >
						<p:graphicImage name="images/sys/#{dicon.iconfile}" rendered="#{not empty wfmDesignerBean.selectedIconSelection}"/>

					</p:dataList>
					
				</p:panel>
			</h:panelGrid>

			<p:panel id="flowProperties" header="PROPERTIES "
				style="margin-bottom:5px;width:100%;height:200px;">

			</p:panel>

		</h:form>
	</ui:define>

</ui:composition>

